<template>
    <div class="transition relative margin-tb-sm">
        <div class="height flex justify-between align-center padding-lr-md radius shadow bg-white">
            <div>{{label}}</div>
            <div>{{isBoolean?value?'开':'关':value}}</div>
        </div>
        <div v-if="isChange" class="none absolute flex justify-center align-center padding-l-sm width height">
            <el-button v-if="!isBoolean" class="radius" size="small" @click="setPenData">{{isRTC?'校正':'修改'}}</el-button>
            <el-switch v-else v-model="switchValue" />
        </div>
    </div>
</template>

<script>
    import * as DataName from '../../utils/dataName';
    import { mapGetters } from 'vuex';
    export default {
        props: {
            label: {
                type: String,
                required: true
            },
            value: {
                required: true
            },
            isChange: { //是否能修改
                type: Boolean,
                required: true
            }
        },
        computed: {
            ...mapGetters(['bluetooth']),
            isBoolean({ value }) {
                return typeof value === 'boolean'
            },
            switchValue: {
                get({ value }) {
                    return value
                },
                set(newVal) {
                    if (this.label === DataName.Buzzer) {
                        this.bluetooth.setBuzzerIsOpen(newVal)
                    }
                    if (this.label === DataName.PressureRouse) {
                        this.bluetooth.setPressureRouse(newVal)
                    }
                }
            },
            isRTC({ label }) {
                return label === DataName.RealTimeClock
            },
            //输入框默认值
            penDataLabel() {
                return (label) => {
                    return this.$store.state.penDataList.find(i => i.label === label).value
                }
            }
        },
        methods: {
            setPenData() {
                switch (this.label) {
                    case DataName.BluetoothName:
                        this.$prompt('修改笔名', '设置', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputValue: this.penDataLabel(DataName.BluetoothName),
                        }).then(({ value }) => {
                            this.bluetooth.setBluetoothName(value)
                        }).catch(() => {
                            return
                        })
                        break;
                    case DataName.RealTimeClock:
                        this.bluetooth.setRealTimeClock()
                        break;
                    case DataName.AutoShutdownTime:
                        this.$prompt('请输入自动关机时间：', '设置', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputValue: parseInt(this.penDataLabel(DataName.AutoShutdownTime)),
                            inputValidator: (value) => {
                                if (isNaN(value)) return '请输入数字'
                                if (!(value > 0 && value < 120)) return '请输入0-120内的整数'
                            }
                        }).then(({ value }) => {
                            this.bluetooth.setAutoShutdownTime(value)
                        }).catch(() => {
                            return
                        })
                        break;
                    case DataName.PressureSensor:
                        this.$prompt('请输入灵敏度：', '设置', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputValue: this.penDataLabel(DataName.PressureSensor),
                            inputValidator: (value) => {
                                if (isNaN(value)) return '请输入数字'
                                if (!(value >= 0 && value <= 4)) return '请输入0-4内的整数'
                            }
                        }).then(({ value }) => {
                            this.bluetooth.setPressureSensor(value)
                        }).catch(() => {
                            return
                        })
                        break;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .relative {
        position: relative;
        top: 0;
        left: 0;
    }

    .absolute {
        position: absolute;
        right: -.5rem;
        top: 0;
    }

    .width {
        width: .7rem;
    }

    .height {
        height: .45rem;
    }

    .transition {

        .none {
            opacity: 0;
            transition: all 0.4s;
        }

        &:hover {
            .none {
                right: -.7rem;
                opacity: 1;
            }
        }
    }

    /deep/ .el-button {
        padding: .09rem .15rem;
    }
</style>